<template>
    <div class="home-root" :style="'background-image:url(' + (config.backImage) + ');'">
        <div class="border">
            <div class="header">
                <div class="menu" @click="openMenu_ClickEvent">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div ref="galContent" id="galContent" class="content" @scroll="content_ScrollEvent">
                <TransitionGroup :css="false" @enter="galItem_EnterEvent">
                    <myItem v-for="(item, index) in dataShowList" :key="index" :curData="item"
                        @click="gtoGalInfo_ClickEvent(item.id)" class="gal-item"></myItem>
                </TransitionGroup>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import popupsManager from '@/manager/popupsManager.js'
import loadingManager from '@/manager/loadingManager.js'
import { useGalStores, useUserStores } from '@/stores/index.js';
import { onBeforeRouteUpdate, useRouter } from "vue-router";
import gsap from 'gsap'

import myItem from './item/index.vue'

const galStores = useGalStores();
const router = useRouter();
const userStores = useUserStores();

const inputText = ref('');
const config = userStores.getConfigAction();


let dataList = [];
let dataShowList = ref([]);
let state = 0;//0:全部数据,1:指定数据,2:检索数据
let pageData = {
    page: 1,
    pageCount: 20,
    gsapIndex: 0,//用于控制动画的下标
};

onMounted(() => {
    loadGalData(true);
})

onBeforeRouteUpdate((e) => {
    popupsManager.hide();
    loadGalData();
})

//item进入时候的动画
const galItem_EnterEvent = (el, done) => {
    var index = pageData.gsapIndex;
    gsap.to(el, {
        delay: index * 0.03,
        marginLeft: 10,
        duration: 0.3,
        opacity: 1,
        onComplete: done,
    });
    pageData.gsapIndex += 1;
}

//加载新数据
const loadGalData = (isFirst = false) => {
    loadingManager.show();
    galStores.getGalListAction(isFirst).then(res => {
        dataList = res;
        loadLastPage(0);
    }).catch(res => {
        messageBox.show({
            color: 'red',
            text: '服务器错误!!!',
            time: -1,
        })
        console.log(res)
    }).finally(() => {
        loadingManager.hide();
    })
}

//加载下一页数据
const loadLastPage = (index) => {
    const { page, pageCount } = pageData;
    if (state == 0) {
        if (index == 0) {
            dataShowList.value = [];
        }
        dataShowList.value = dataShowList.value.concat(dataList.slice(index * pageCount, (index + 1) * pageCount));
        pageData.page = index;
        pageData.gsapIndex = 0;
    }
}

//跳转到Gal详情页
const gtoGalInfo_ClickEvent = (curId) => {
    router.push({
        path: '/galInfo',
        query: { id: curId },
    })
}

//打开Tags的页面
const openMenu_ClickEvent = () => {
    popupsManager.show(3, 'galTag', false, 80);
}

//触底加载动画
const galContent = ref();
const content_ScrollEvent = (e) => {
    const height = galContent.value.clientHeight;
    const cur = e.target;
    if (cur.scrollTop + height + 20 > cur.scrollHeight) {
        loadLastPage(pageData.page + 1);
    }
}

</script>

<style scoped lang="scss">
.home-root {
    width: 100%;
    height: 100%;

    background-size: cover;
    background-position: center;

    .border {
        width: 100%;
        height: 100%;
        backdrop-filter: blur(10px);
        display: grid;
        grid-template-rows: 50px 1fr;

        .header {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .menu {
                width: 35px;
                height: 23px;
                margin: 5px;
                margin-left: 10px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;

                >div {
                    height: 4px;
                    width: 80%;
                    background: rgba(66, 66, 66, 1);
                    border-radius: 4px;
                }

            }

            .input {
                margin-right: 20px;
                transition-duration: 0.3s;
                width: 20%;
                height: 100%;
                margin-top: 11px;

                >input {
                    width: calc(100% - 20px);
                    background: rgba(0, 0, 0, 0);
                    background: none;
                    outline: none;
                    border: 0px;
                    outline: none;
                    font-size: 16px;
                    text-align: center;
                    padding: 5px 10px;
                }

                .input-border {
                    height: 4px;
                    width: 100%;
                    background: rgb(66, 66, 66);
                    border-radius: 4px;
                }
            }

            .input-show {
                width: 80%;
            }
        }

        .content {
            height: 100%;
            overflow-y: auto;

            .gal-item {
                margin-left: 50px;
                opacity: 0;
            }
        }
    }
}

.tagList-enter-active,
.tagList-leave-active {
    transition: all .5s ease;
}

.tagList-enter-from,
.tagList-leave-to {
    opacity: 0;
    transform: translateX(30px);
}
</style>